import React, { useState } from 'react'
import { useTitle } from '../hooks/useTitle'
// 16.8  (hooks)  ---  use开头的统称hook
// hook只能在函数式组件中来进行掉用


// function useState() {
//     return []
// }

export default function State() {
    // useState()  返回一个数组[内部状态，修改内部状态的方法]
    // useState中修改数据的方法，参数直接写值就可以
    // useState不适合修改复杂数据
    const [count, setCount] = useState(888)
    const [userInfo, setUserInfo] = useState({
        name: "张三",
        age: 27
    })

    useTitle()
    
    // console.log(useState(888))
    return (
        <div>
            {/* Com --- { count }
            <button onClick={() => {
                setCount(count+1)
            }}>点我</button> */}
            <p>
                姓名: { userInfo.name }
            </p>
            <p>
                年龄: { userInfo.age }
            </p>
            <div>
                <button onClick={() => {
                    const userInfo2 = { ...userInfo }
                    userInfo2.name = "李四"
                    setUserInfo(userInfo2)
                }}>修改姓名</button>
            </div>
        </div>
    )
}
